<template>
  <ElTable :data="data" v-bind="$attrs" @row-click="handleClick">
    <template v-for="item in options" :key="item.field">
      <template v-if="!item.hidden">
        <ElTableColumn
          v-if="item.field === 'selection'"
          type="selection"
          :label="item.label ? item.label : '选择'"
          :width="item.width"
        ></ElTableColumn>
        <ElTableColumn
          v-else-if="item.field === 'index'"
          type="index"
          :label="item.label ? item.label : '序号'"
          :width="item.width"
        ></ElTableColumn>
        <template v-else-if="item.slots">
          <ElTableColumn
            v-bind="item.attrs"
            :label="item.label ? item.label : item.field"
          >
            <template #default="scope">
              <component :is="item.slots" :row="scope.row" />
            </template>
          </ElTableColumn>
        </template>
        <ElTableColumn
          v-else
          :prop="item.field"
          :label="item.label ? item.label : item.field"
          :width="item.width"
          sortable
        ></ElTableColumn>
      </template>
    </template>
  </ElTable>
  <ElPagination
    v-if="pageination"
    style="margin-top: 10px"
    background
    layout="sizes,prev,pager,next,total"
    :total="total"
    @size-change="sizeChangeFn"
    @change="handlePageCurrentChange"
  />
</template>
<script setup>
import { defineProps, defineEmits, ref } from "vue";
import { ElTable, ElTableColumn, ElPagination } from "element-plus";
import { defineComponent } from "vue";
import { ElButton } from "element-plus";
const props = defineProps({
  data: { type: Array, default: () => [] },
  options: { type: Array, default: () => [] },
  pageination: { type: Boolean, default: true },
  total: { type: Number, default: 0 },
});
const emit = defineEmits(["curronRow", "pageChange"]);
function handleClick(row) {
  // console.log(row)
  emit("curronRow", row);
}

const pageSize = ref(10);
const nowPage = ref(1);
function sizeChangeFn(val) {
  pageSize.value = val;
}
function handlePageCurrentChange(val) {
  nowPage.value = val;
  // console.log(pageSize.value,nowPage.value)
  emit("pageChange", { pageSize: pageSize.value, nowPage: nowPage.value });
}
</script>
